<template>
  <div id="frame">
    <div id="title">
      {{title}}
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Frame",
  props:["title"],
  data(){
    return {}
  },
  mounted(){
    document.body.style.backgroundColor = "#c6e2ff";
  }
}
</script>

<style scoped>
#frame{
  width:90%;
  margin:20px auto;
  background-color:white;
  padding:20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.content{
  min-height:300px;
  width:100%;
  border:1px solid #e9e9eb;
  border-radius: 2px;
}

#title{
  border-left: 5px solid #53a8ff;
  color:#409eff;
  text-align:left;
  padding-left: 10px;
  font-size: 20px;
  font-weight: bolder;
  margin-bottom: 10px;
}
</style>
